import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import './style.less'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup,
    gameList: state.app.gameData
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg))
  }
}


class RuleResult extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      peroid: 1,
      battles: []
    }
  }

  changePeroid(peroid) {
    this.setState({peroid})
    this.query(peroid)
  }

  public componentDidMount() {
    this.query(this.state.peroid)
    // this.fakeData()
  }

  peroids: Array<any> = [{peroid: 1, text: '今日'}, {peroid: 2, text: '本周'}, {peroid: 3, text: '本月'}]

  query(peroid) {
    let crowdId = this.props.currentGroup.id;
    // game-lobby/grouprecord/{areaCode}/{recordType}/{offset}/{limit}/{crowdId}
    const url = `${config.pre}/grouprecord/${Cookies.get('areaCode')}/${peroid}/0/100/${crowdId}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      console.log(data)
      if (data.result) {
        // this.props.openModal(data.message)
        this.setState({battles: []})
        return
      } else {
        // const parsed = data.data.dataList.map(resultData => {
        //   const {confs, dbVo, recordDbVos} = resultData
        //   const gameConf = this.props.gameList.find(game =>game.gameId === confs[0].gameType)
        //   dbVo[0].totalSettleVo.sort((a, b) => a.point < b.point)
        //   return {
        //     gameName: gameConf.name,
        //     alias: confs[0].confName,
        //     roomNo: dbVo[0].roomNo,
        //     bigWinner: dbVo[0].totalSettleVo[0]
        //   }
        // })
        // console.log('parsed', parsed);
        const {confs, dbVo, recordDbVos} = data.data.dataList[0]
        console.log(data.data.dataList[0])
        const parsed = recordDbVos.map((recordVo, index) => {
          const gameConf = this.props.gameList.find(game =>game.gameId === confs[index].gameType)
          dbVo[index].totalSettleVo.sort((a, b) => a.point < b.point)
          return {
            gameName: gameConf.name,
            alias: confs[index].confName,
            roomNo: dbVo[index].roomNo,
            bigWinner: dbVo[index].totalSettleVo[0]
          }
        })
        this.setState({battles: parsed})
      }
    })
  }

  toDetail(battle) {
    window.location.hash = `WatchCodeShow/${battle.roomNo}`
  }

  fakeData() {
    this.setState({battles: [{gameName: '跑得快', alias: '放v', roomNo: 31231, bigWinner: {nickName: 'klfe'}}]})
  }

  public render() {
    const {currentGroup, currentGroupRules, loadComplete} = this.props
    const {battles, peroid} = this.state
    const isMyGroup = currentGroup && currentGroup.owner === 1
    // const {groupName, tip, currentState} = this.state
    return <div className="view-page group-view">
      <div className="pure-g inner-header">
        <div onClick={() => {window.location.hash = 'MemberList'}} className="pure-u-1-3 vh-center inner-tab">
          <span>成员</span>
        </div>
        <div className="pure-u-1-3 vh-center inner-tab active">
          <span>战绩</span>
        </div>
        <div onClick={() => {window.location.hash = 'Inner'}} className="pure-u-1-3 vh-center inner-tab">
          <span>房间</span>
        </div>
      </div>
      <div className="inner-body v-scroll">
        {/* <div className="pure-g mtr-10">
          <div onClick={this.changePeroid.bind(this, 1)} className="pure-u-1-3 vh-center inner-tab active">
            今日
          </div>
          <div onClick={this.changePeroid.bind(this, 7)} className="pure-u-1-3 vh-center inner-tab">
            本周
          </div>
          <div onClick={this.changePeroid.bind(this, 30)} className="pure-u-1-3 vh-center inner-tab">
            本月
          </div>
        </div> */}
        <div className="pure-g mtr-10">
          {
            this.peroids.map((p, index) => {
              const cn = classnames({'button-secondary': p.peroid === peroid, 'pure-button': true})
              return <div key={index} onClick={this.changePeroid.bind(this, p.peroid)} className="pure-u-1-3 vh-center inner-tab">
                <button className={cn}>{p.text}</button>
              </div>
            })
          }
        </div>
        <table  className="record-table pure-table pure-table-bordered full-width mtr-10">
          <thead>
              <tr>
                  <th>游戏</th>
                  <th>别名/房号</th>
                  <th>大赢家</th>
              </tr>
          </thead>
          <tbody>
              {
                battles.map((battle, index) => {
                  return <tr key={index} onClick={this.toDetail.bind(this, battle)}>
                    <td>{battle.gameName}</td>
                    <td>{battle.alias + '/' + battle.roomNo}</td>
                    <td><span className="span-center"><img className="big-winner" src="img/groupNew/big-winner.png" alt=""/>{battle.bigWinner.nickName}</span></td>
                  </tr>
                })
              }
              {
                battles.length === 0 ? <tr className="group-tip"><td>暂无记录</td></tr> : null
              }
          </tbody>
      </table>
        {/* <div className="pure-g mtr-10 pure-table-bordered">
          <div onClick={this.changePeroid.bind(this, 1)} className="pure-u-1-3 vh-center result-content">
            游戏
          </div>
          <div onClick={this.changePeroid.bind(this, 7)} className="pure-u-1-3 vh-center result-content">
            别名/房号
          </div>
          <div onClick={this.changePeroid.bind(this, 30)} className="pure-u-1-3 vh-center result-content">
            大赢家
          </div>
          <div onClick={this.changePeroid.bind(this, 1)} className="pure-u-1-3 vh-center result-content">
            跑得快
          </div>
          <div onClick={this.changePeroid.bind(this, 7)} className="pure-u-1-3 vh-center result-content">
            跑得快/10123
          </div>
          <div onClick={this.changePeroid.bind(this, 30)} className="pure-u-1-3 vh-center result-content">
            <img className="big-winner" src="img/groupNew/big-winner.png" alt=""/>
            阿斯蒂芬
          </div>
        </div> */}
      </div>
      {
        <div className="inner-bottom">
          <div className="text vh-center"><span>群战绩</span></div>
          <NavLink to="/Inner"><img className="back" src="img/app/back.png" alt="" /></NavLink>
        </div>
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(RuleResult)